<template>
	<div class="report-result">
		<table>
			<thead><tr class="header-td"><th colspan="99">结果说明</th></tr></thead>
			<tbody>
				<!-- 因子项 -->
				<tr class="header-td" v-if="setItem[2]">
					<td width="67%" colspan="2">项目</td>
					<td>程度</td>
					<td>评分</td>
				</tr>
				<tr class="fontstyle" v-for="(item, index) in tagconclusions" :key="index">
					<td width="67%" colspan="2" v-if="tagconclusions.length>0 && setItem[2]">{{ item.title }}</td>
					<td v-if="tagconclusions.length>0 && setItem[2]">{{ item.mark }}</td>
					<td v-if="tagconclusions.length>0 && setItem[2]">{{ item.score }}</td>
				</tr>
				<tr style="text-align: center;" v-if="tagconclusions.length==0 && !setItem[2]">
					<td colspan="4">无数据</td>
				</tr>
				<!-- 因子说明 -->
				<tr class="factor-description" v-if="setItem[5]">
					<td class="header-td" width="20%">因子说明</td>
					<td colspan="3" class="cont">
						<div v-for="(item, index) in factordescription" :key="index" class="contbox">
							<span class="cor">【{{ item.title }}】</span><span>{{ item.comment }}</span>
						</div>
						<div v-if="factordescription.length==0" style="text-align: center;">无数据</div>
					</td>
				</tr>
				<!-- 报告结果 -->
				<tr v-if="setItem[4]">
					<td class="header-td" width="20%">报告总评</td>
					<td colspan="3" class="cont">
						<div v-html="commendContent('comment')"></div>
					</td>
				</tr>
				<!-- 指导意见 -->
				<tr v-if="setItem[6]">
					<td class="header-td" width="20%">指导意见</td>
					<td colspan="3" class="cont">
						<div v-html="commendContent('advice')"></div>
					</td>
				</tr>
				<!-- 增加项 -->
				<tr v-for="(item, index) in addcontent" :key="index">
					<td class="header-td" width="20%">{{ item.name }}</td>
					<td colspan="3" class="cont">
						<div class="addcontbox"><div v-html="commendContent('addcontent',item)"></div></div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script setup lang="ts">
	import {watch,ref,computed} from 'vue';
	
	const RESULTPROPS = defineProps({
	  descriptData: {
	    type: Object,
	    default() {
	      return {};
	    }
	  },
	  addcontent: {
	    type: Array as any,
	    default() {
	      return [];
	    }
	  },
	  setItem: {
	    type: Array,
	    default() {
	      return [];
	    }
	  },
	});
	
	const tagconclusions=ref<any>([]);
	const factordescription=ref<any>([]);
	const comment=ref<any>([]);
	
	const commendContent = computed(() => (name, item = 0 as any) => {
		if (!comment.value) return; //脏数据
		if (name == 'advice') {
			if(!comment.value.advice)return;
			let arr = comment.value.advice.split("");
			return arr.map((item) => {
				return item === "\n" ? "<br>" : item;
			}).join("");
		}
		if (name == 'comment') {
			if(!comment.value.comment)return;
			const arr = comment.value.comment.split("");
			return arr.map((item) => {
				return item === "\n" ? "<br>" : item;
			}).join("");
		}
		if (name == 'addcontent') {
			if (item == 0) return;
			let arr = item.content.split("");
			return arr.map((item) => {
				return item === "\n" ? "<br>" : item;
			}).join("");
		}
	});
	
	//判断是否有指导建议和结果,如果有的话就把总分和结果拼接起来
	const commentFn=(data)=>{
		let obj={comment:'',advice:''};
		if(!data.base_conclusion) return obj;
		if(JSON.stringify(data.base_conclusion)=="[]") return obj;
		let {comment,advice}=data.base_conclusion.calculate;
		obj={comment,advice};
		return obj;
	};
	
	const tagconclusionFn=(data)=>{
		let tagconclusions = [];
		let {tag_conclusions,tag_scores}=data;
		if(tag_conclusions.length==0)return tagconclusions;
		for (let i in tag_conclusions) {
			tagconclusions.push({
				name: i,
				...tag_conclusions[i]
			});
		}
		for (let i in tag_scores) {
			tagconclusions.forEach((item) => {
				if (item.name == i) {
					item["score"] = tag_scores[i];
				}
			});
		}
		return tagconclusions;
	};
	
	//因子项
	const factoryFn=(data)=>{
		//判断是否有因子项
		if(data.tag_scores){
			tagconclusions.value = tagconclusionFn(data);
		}
		//判断因子表是否存在并且因子说明是否有
		const obj4 = tagconclusions.value.filter((item) => item.comment != "");
		// data["tagconclusions"] = tagconclusions;
		factordescription.value = obj4;
		// 判断是否有指导建议和结果
		comment.value=commentFn(data);
	};
	
	watch(()=>RESULTPROPS.descriptData,()=>{
		if(!RESULTPROPS.descriptData)return;
		let data=JSON.parse(JSON.stringify(RESULTPROPS.descriptData));
		factoryFn(data);
	});
	
</script>

<style lang="less" scoped>
	table {
		width: 100%;
		border-collapse: collapse;
		tr,th,td {
			border: 2px solid #1abb73;
		}

		th,td {
			padding: 10px 0;
		}

		thead {
			tr {
				&:first-child {
					font-size: 16px;
					font-weight: bold;
					color: #1abb73;
					text-align: center;
					padding: 10px 0;
				}
			}
		}

		.header-td {
			background: rgba(26, 187, 115, 0.2);
			text-align: center;
		}

		.contentd {
			font-size: 16px;
			font-weight: bold;
		}
	}

	//结果说明样式
	.report-result {
		margin-bottom: 20px;
		font-size: 16px;

		.header-td {
			font-weight: 400;
		}

		.fontstyle {
			text-align: center;
			font-weight: 500;
		}
		.cont {
			padding: 0 10px;

			.contbox {
				margin-bottom: 5px;
				width: 100%;

				// display: flex;
				span.cor {
					color: #f64c4c;
				}
			}
		}
	}

	.add-content {
		text-align: center;
		color: #0066ff;
		cursor: pointer;
	}
</style>
